{% load set_var %}
 {% if urlRetour %}
	<p id="retourAlbum" src="{{urlRetour}}">< Retour aux albums</p>
 {% endif %}
<div id="gridContainer" >
{% for column in columns %}
	<div id="gridColumn" >
		{% for photo in column %}
			{% set heightInfo = photo.miniHeight - 35 %}
			<div class="gridElement" style="height :{{photo.miniHeight}}px;" >
				<div class="gridPhoto" width="170" height="{{photo.miniHeight}}">
					<img src="/media/{{photo.urlThumb}}" width="170" height="{{photo.miniHeight}}" alt="{{photo.title}}" />
				</div>
				<div class="gridInfo">
					<div class="whiteBorder" style=" height:{{photo.miniHeight}}px" rel="#photo{{photo.id}}"></div>
					<div class="infoBox" style="top:{{heightInfo}}px;">
						<span class="infoTextStyle" style=""><strong>{{photo.title}}</strong> ({{photo.city.region.country.name}})<br />
							<i style="font-style:10px;">by {{photo.album.photographer.username}}</i>
						</span>
					</div>
				</div>
				
			</div><div style="clear:both;"></div>
		{% endfor %}
	</div>
{% endfor %}
	<div style="clear:both;"></div>
	<div id="paginagtion" style="width : 1000px; text-align:center;" type="{{gridType}}" src="{{photoType}}">
		{% for i in nbPages %}
			{% if pages.number == i %}
				<span style="color : white;" id="currentPage" src="{{i}}">{{ i }}  </span>
			{% else %}
				<span style="cursor:pointer;color:#333" src="{{i}}" class="paginationBt">{{ i }}  </span>
			{% endif %}
		{% endfor %}
	</div>
</div>

{% include "displayPhoto/photoComments.html" with columns=columns myPhotographer=myPhotographer%}



<script type="text/javascript">
$(function() {
	
	
	$(".gridInfo .whiteBorder[rel]").each(function() {
        var el = $(this);
        var target = el.attr('rel');
        $(target).appendTo('body');
        el.overlay({
			target:target,
			effect: 'apple', 
			mask: '#000',
			onLoad : function(ev){
				//window.document.body.style.overflow = 'hidden';
				idPhoto = target.substring(6);
				//alert(idPhoto);
				updateCommentsList(idPhoto, 0);
			},
			 onClose : function(ev){
				//window.document.body.style.overflow = 'auto';
				resetCommDisplay();
			}
		});
	});
	
	//mCustomScrollbars();
});	


</script>

